<template>

	<view class="goods-list">
		<view class="title" v-if="title">
			
				<text class="">{{title}}</text>
		
		</view>
		<view :class="showType == 2 ? 'two-goods': 'goods'">
			<view class="item" @tap="toDetail(item)" v-for="(item,index) in goods" :key="index">
				<view class="goods-img">
					<image class="" lazy-load="true" :src="item.original_image"></image>
					
				</view>
				<view class="goods-info">
					<view class="goods-name">{{item.goods_name}}</view>
					
					<view class="price-info">
						<view class="left">积分抵扣{{item.point}}元</view>
						<view class="right">¥{{item.shop_price}}</view>
						
					</view>
					<view class="price-info">
						<!-- <view class="left">VIP收益{{item.point}}元</view> -->
						<view class="left"></view>
						<view class="right">销量:{{item.sale_number}}</view>
						
					</view>
				</view>
			</view>


		</view>



	</view>
</template>

<script>
	import uniIcon from './uni-icon.vue';
	export default {
		components: {
			uniIcon
		},
		data() {
			return {

			};
		},
		props: ['goods', 'title', 'goodsType', 'showType'],
		methods: {
			//去商品详情
			toDetail: function(goods){	
				uni.navigateTo({
					url:'/pages/goods/detail?id='+goods.id
				})
			}
		}
	}
</script>

<style>
	.goods-list {
		flex-direction: column;
		margin-bottom: 16upx;
	}

	.goods-list .title {
		line-height: 80upx;
		padding: 0 20upx;
		justify-content: center;
		align-items: center;
		background: linear-gradient(to left,#F09BC2 0,#AE65AC 50%, #F09BC2 100%);
		border-bottom: 1upx solid #eee;
		height: 80upx;
		color: #fff;
		display: flex;
		font-size: 28upx;
	}

	

	.goods-list .goods {
		flex-direction: column;
		background: #fff;
		font-size: 24upx;
		display: flex;
	}

	.goods-list .goods .item {
		border-bottom: 1upx solid #eee;
		padding: 20upx;
		display: flex;
		flex: 1;
		text-align: left;
	}

	.goods-list .goods .item .goods-img {
		width: 200upx;
		flex-direction: column;
	}
	
	

	.goods-list .goods .item .goods-info {
		flex: 1;
		flex-direction: column;
		padding-left: 20upx;
		color: #999;
	}
	
	

	.goods-list .goods .goods-name{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333;
		margin-bottom: 10upx;
		height: 94upx;
	}

	.goods-list .goods .item .goods-img image {
		width: 200upx;
		height: 200upx;
	}

	
	
	.goods-list .two-goods {
		flex-wrap: wrap;
		background: #fff;
		flex-direction: row;
		display: flex;
		font-size: 26upx;
		text-align: left;
	}

	.goods-list .two-goods .item {
		border-bottom: 1upx solid #eee;
		padding: 20upx;
		width: 375upx;
		box-sizing: border-box;
		flex-direction: column;
	}

	.goods-list .two-goods .item .goods-img {
		width: 335upx;
		flex-direction: column;
	}
	
	.goods-list .two-goods .item .goods-info {
		flex: 1;
		flex-direction: column;
		padding-left: 20upx;
		color: #999;
	}
	
	

	.goods-list .two-goods .goods-name{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #333;
		margin-bottom: 10upx;
		height: 94upx;
	}

	.goods-list .two-goods .item image {
		width: 335upx;
		height: 335upx;
	}

	.goods-list .two-goods .price-info, .goods-list .goods .price-info{
		display: flex;
		justify-content: space-between;
	}
	
	.goods-list .two-goods .price-info .left, .goods-list .goods .price-info .left{
		color: #e60012;
	}
</style>
